import React, { Component } from 'react'
import { bindActionCreators } from 'redux'
import moment from 'moment'
import { connect } from 'react-redux'

import { Scrollbars } from 'react-custom-scrollbars'

import { formatContractPriceDecimal, formatDecimal, formatValue } from '../../../utils/dataUtils'

import { intl } from '../../../intl/intl'
import wsHOC from '../../common/wsHOC'
import themeHOC from '../../common/themeHOC'

import { subscribeDealDetail, unsubscribeDealDetail, getDealDetail, setPollDealDetailEnabled } from '../../../redux/actions/tradeDealDetailAction'

import './trade-detail.less'

@connect(state => {
  return {
    currentContract: state.trade.market.get('currentContract'),
    showDealDetail: state.trade.dealDetail.get('showDealDetail')
  }
}, dispatch => {
  return bindActionCreators({
    subscribeDealDetail, unsubscribeDealDetail, getDealDetail
  }, dispatch)
})
@themeHOC
@wsHOC(props => {
  props.subscribeDealDetail(props.currentContract)
}, props => {
  props.unsubscribeDealDetail(props.currentContract)
})
class TradeDetail extends Component {
  componentDidMount () {
    this.props.getDealDetail()
  }

  componentDidUpdate (prevProps, prevState, snapshot) {
    const { currentContract, subscribeDealDetail, unsubscribeDealDetail } = this.props
    if (formatValue(prevProps.currentContract, 'InstrumentID') !== formatValue(currentContract, 'InstrumentID')) {
      unsubscribeDealDetail(prevProps.currentContract)
      subscribeDealDetail(currentContract)
    }
  }

  componentWillUnmount () {
    setPollDealDetailEnabled(false)
  }

  render () {
    const { theme, currentContract, showDealDetail } = this.props
    return (
      <div className={`trade-trade-detail-${theme}`}>
        <p
          datatype="single"
          className="trade-column-content-title">
          {intl('real_trade')}
        </p>
        <div
          className="trade-trade-detail-list-row-container">
          <span
            datatype="time"
            className="trade-trade-detail-list-row-item">
            {intl('time')}
          </span>
          <span
            datatype="price"
            className="trade-trade-detail-list-row-item">
            {intl('price')}({formatValue(currentContract, 'PriceCurrency')})
          </span>
          <span
            datatype="volume"
            className="trade-trade-detail-list-row-item">
            {intl('volume')}
          </span>
        </div>
        <Scrollbars
          className="trade-trade-detail-list-container">
          <ul>
            {
              showDealDetail.map((data, index) => {
                return (
                  <li
                    key={`trade_${index}`}
                    className="trade-trade-detail-list-row-container">
                    <span
                      datatype="time"
                      className="trade-trade-detail-list-row-item">
                      {moment(+formatValue(data, 'TradeTime') * 1000).format('MM-DD hh:mm')}
                    </span>
                    <span
                      datatype="price"
                      direction={formatValue(data, 'direction') === 48 ? 'buy' : 'sell'}
                      className="trade-trade-detail-list-row-item">
                      {formatContractPriceDecimal(currentContract, formatValue(data, 'Price'))}
                    </span>
                    <span
                      datatype="volume"
                      className="trade-trade-detail-list-row-item">
                      {formatDecimal(formatValue(data, 'Volume'))}
                    </span>
                  </li>
                )
              })
            }
          </ul>
        </Scrollbars>
      </div>
    )
  }
}

export default TradeDetail
